import { serverHelpers } from "@/app/_trpc/serverHelper";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import SingleProjectPage from "./_components/SingleProjectPage";
import { notFound } from "next/navigation";
import WrapperContent from "@/components/WrapperContent";
export const dynamic = 'force-dynamic'

interface PageParams {
  id: string[]
}

const page = async ({ params }:{params:PageParams}) => {


  const id =params.id?.[0]


  if(!id){
    return notFound()
  }
  
  serverHelpers.projects.getProjectById.prefetch({value:id})
  serverHelpers.materials.getMaterials.prefetch()
  
  const dehydratedState=dehydrate(serverHelpers.queryClient)
  return (
    <div className="relative">
      <HydrationBoundary state={dehydratedState}>
        <WrapperContent>
        <SingleProjectPage id={id}/>
        </WrapperContent>
      </HydrationBoundary>
    </div>
  );
};

export default page;